<template>
    <div class="goodinfoContainer">
        <!-- 轮播图区域 -->
            <!-- 1.导入轮播图组件 import-->
            <!-- 2.挂载到父组件的components上 -->
            <!-- 3.以标签的形式，插入到模板结构内 -->
            <swipe :speed="3000" :swipeList="swipeList"></swipe>
        <!-- 商品信息区域 -->
            <div class="goodsInfo">
                <p class="price">
                    <span class="sellPrice">
                       <span>￥</span>
                        {{goodsInfo.sell_price}}
                    </span>
                    <span class="marketPrice">
                        <label class="lb">原价</label>
                        {{goodsInfo.market_price}}
                    </span>
                </p>
                <p class="title">{{goodsInfo.title}}</p>
                <p class="abstract">{{goodsInfo.abstract}}</p>
                <p class="add_time">
                    <label class="lb">发布时间</label>
                    {{goodsInfo.add_time | dateFormat}}
                </p>
                <p class="stock">
                    <span>
                        <label class="lb">库存</label>
                        {{goodsInfo.stock}}
                    </span>
                    <span>
                        <label class="lb">关注度</label>
                        {{goodsInfo.click_count}}
                    </span>
                </p>
                <p class="count">购买数量
                    <numberbox :min="1" :max="goodsInfo.stock" :initCount="1"
                     @getCount="getGoodsCount" :goodsId="this.goodsId" :isChangeStore="false"></numberbox>
                </p>
                <p class="btn">
                <button type="button" class="mui-btn mui-btn-warning" @click="addToCart">
                    加入购物车
                    </button>
				<button type="button" class="mui-btn mui-btn-danger">
                    立即购买
                    </button>
                </p>
            </div>
        <!-- 卖家信息区域 -->
        <div class="sellerInfo">
            <h3>卖家信息</h3>
            <p class="seller">
                <label class="lb">卖家</label>{{goodsInfo.seller}}
            </p>
            <p class="seller_phone">
                <label class="lb">库存</label>{{goodsInfo.seller_phone}}
            </p>
        </div>
        <!-- 商品详情图片区域 -->
        <div class="imgInfo">
            <ul>
                <li v-for="item in swipeList" :key="item.id"><img :src="item.img_url" alt=""></li>
            </ul>
        </div>
        <!-- 评论区域 -->
        <comment :id="this.goodsId"></comment>
    </div>
</template>

<script>
import swipe from'../subComponents/swipe.vue'
import numberbox from '../subComponents/numberbox.vue'
import comment from '../subComponents/comment'

import {Toast} from 'mint-ui';
export default {
    data(){
        return{
            swipeList:[],//轮播图数据
            goodsId:this.$route.params.id,
            goodsInfo:{},
            goodsCount:1, //保存传值
        }
    },
    created(){
        this.getSwipeData();
        this.getGoodsInfo();
    },
    methods:{
        //获取轮播图数据
        getSwipeData(){
            this.$http({
                method:'get',
                url:'/thumbs/' + this.goodsId,
            }).then(res => {
                var data = res.data;
                if(data.Status == 0){
                    this.swipeList = data.Data;
                }else{
                    Toast("获取轮播图失败")
                }
                   
            })
        },
        getGoodsInfo(){
            this.$http({
                method:'get',
                url:'/goods/goodsinfo',
                params:{
                    goodsId:this.goodsId,
                }
            }).then(res => {
                var data = res.data;
                if(data.Status == 0){
                    this.goodsInfo = data.Data[0];//获取商品头号信息
                }else{
                    Toast("获取信息失败")
                }
                   
            })
        },
        addToCart(){
            //子组件向父组件传值
            //父组件通过事件机制，给子组件传递一个带参数的方法
            //在子组件内部找合适的时机调用该方法，通过参数传递，把传给父组件的数据传过去
            var goods = {
                id:this.goodsId,
                img_url:this.goodsInfo.img_url,
                title:this.goodsInfo.title,
                price:this.goodsInfo.sell_price,
                count:this.goodsCount,
                stock:this.goodsInfo.stock
            };
            // this.$store.state.cart.push(goods);
            // console.log(this.$store.state.cart);
            //应该调用仓储对象mutations里提供的方法间接处理数据
            this.$store.commit('addToCart',goods);
            // console.log(this.$store.state.cart);
        },
        //让子组件给父组件传值
        getGoodsCount(count){
            this.goodsCount = count;
            console.log(count);
        }
    },
    components:{
        swipe,
        numberbox,
        comment,
    }
}
</script>

<style lang="less">
.goodinfoContainer{
    padding: 8px;
    padding-bottom: 40px;
    .goodsInfo{
        padding: 5px;
        background-color: #fff;
        border-radius: 5px;
        margin-bottom: 10px;
        p{
            font-size: 14px;
            line-height: 16px;
            color: #333;
            margin: 20px;
            label.lb{
                color: #999;
                margin-right: 20px;
            }
            .mui-btn-warning{
                margin-right: 10px;
            }

        }
        .price{
            .sellPrice{
                color: #ce0000;
                font-size: 28px;
                font-weight: bold;
                margin-right: 20px;
                span{
                    font-size: 12px;
                }
            }
            .marketPrice{
                text-decoration: line-through;
                .lb{
                    margin: 0;
                }
            }
        }
        .title{
            font-size: 16px;
            font-weight: bold;
        }
        .abstract{
            font-size: 15px;
            line-height: 20px;
        }
        .stock{
            span{
                 margin-right: 20px;
            }
        }
        .count{
            .mui-numbox{
                margin-left: 20px;
            }
        }
    }
    .sellerInfo{
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        h3{
            font-size: 14px;
            color: #999;
            margin-bottom: 20px;
        }
        p{
            color: #333;
            label.lb{
                color: #999;
                margin-right: 20px;
            }
        }
    }
    .imgInfo{
        background-color: #fff;
        border-radius: 5px;
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            li{
                width: 100%;
                img{
                    width: 100%;
                }
            }
        }
    }
}
</style>